<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="5"></el-col>
            <el-col :span="7"><img :src="GoodsForm.goodsPicture" style="width: 400px;"></el-col>
            <el-col :span="7">
                <h1>{{ GoodsForm.goodsName }}</h1>
                <span v-html="GoodsForm.goodsDesc"></span>
                <h3 style="color: red;">价格：￥{{ GoodsForm.goodsPrize }}</h3>
                <div style="display: flex; align-items: center;margin-left: 150px;">
                    <el-input-number v-model="cartInfo.cartCount" :min="1" :max="10" />
                    <h4 style="color: red; margin-left: 10px;">共计：￥{{ totalPrice }}</h4>
                </div>
                <br><br>
                <el-button @click="addCart">添加购物车</el-button>
                <el-button @click="addOrders">立即下单</el-button>
            </el-col>
            <el-col :span="5"></el-col>
        </el-row>
    </div>
</template>
    
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { ElNotification, FormInstance } from 'element-plus'
import { useRoute } from 'vue-router'
import api from '@/api';
import router from '@/router';
import store from '@/store';

const route = useRoute()

const GoodsForm = ref({
    id: route.params.id,
    goodsName: route.params.goodsName,
    goodsPrize: Number(route.params.goodsPrize),
    goodsDesc: route.params.goodsDesc,
    goodsPicture: route.params.goodsPicture as string,
    goodsReleaseTime: route.params.goodsReleaseTime,
    goodsId: route.params.goodsId,
    cartCount: Number(route.params.cartCount),
    goodsTypeId: Number(route.params.goodsTypeId),
    goodsType: route.params.goodsType
})

// 计算总价的计算属性
const totalPrice = computed(() => {
    return GoodsForm.value.goodsPrize * cartInfo.value.cartCount;
});

const cartInfo = ref({
    id: route.params.id,
    cartCount: Number(route.params.cartCount)
})

const addCart = () => {
    api.cart.editCart(cartInfo.value)
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

function addOrders() {
    api.cart.deleteCart(GoodsForm.value.id)
    .then(response => {
            // 请求成功，处理返回的数据
            // 更新数据
            router.push({
            name: 'addorders', params: {
            userId: (store.state as any).user.userInfo.id,
            userName: (store.state as any).user.userInfo.userName,
            goodsId: GoodsForm.value.goodsId,
            goodsName: GoodsForm.value.goodsName,
            orderPrize: totalPrice.value,
            goodsTypeId: GoodsForm.value.goodsTypeId,
            goodsType: GoodsForm.value.goodsType,
            goodsPicture: GoodsForm.value.goodsPicture,
            orderCount: cartInfo.value.cartCount,
            telephone: (store.state as any).user.userInfo.telephone
        }
            // 其他操作...
        })
        .catch(error => {
            // 请求失败，处理错误信息
            console.error(error);
        });
    
    })
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>